<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>绑定银行卡</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>


</head>
<body>
<div id="blank" class="header">
    <div v-back.tapmode class="back"></div>
    <span class="title">绑定银行卡</span>
</div>
<div id="app" class="main-container">
    <div class="accountsBind-input-container">
        <div class="accountsBind-input-row">
            <span>银行卡号: </span>
            <input v-model="id" placeholder="请输入">
        </div>
        <div class="accountsBind-input-row">
            <span>开户银行: </span>
            <input v-model="bankName" placeholder="请输入">
        </div>
        <div class="accountsBind-input-row">
            <span>开户支行: </span>
            <input v-model="branch" placeholder="请输入">
        </div>
        <div class="accountsBind-input-row">
            <span>真实姓名: </span>
            <input v-model="name" placeholder="请输入">
        </div>
    </div>
    <div class="btn-commit" :style="{backgroundColor:btnBg}" v-myclick="addAccount">提交</div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script>
    var vm;

    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        initApp();
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                id: '',
                branch: '',
                name: '',
                bankName: '',
                btnBg: '#cccccc'
            },
            computed:{
                canBind:function () {
                    return this.id && this.name && this.branch && this.bankName;
                }
            },
            methods: {
                changeBtnBg: function () {
                    if (this.canBind) {
                        this.btnBg = '#9d0152'
                    } else {
                        this.btnBg = '#cccccc'
                    }
                },
                addAccount: function () {
                    if (!this.canBind) {
                        return;
                    } else {
                        var data = {
                            member_id: getPrefs('member_id'),
                            type: 2,
                            bank_name: this.bankName.trim(),
                            bank_branch: this.branch.trim(),
                            bank_card: this.id.trim(),
                            bank_realname: this.name.trim(),
                        };
                        var callback = function () {
                            api.sendEvent({
                                name: 'bindAccounts',
                            });
                            api.closeWin();
                        };
                        pinet.post(URL.addAccount, data, callback);
                    }
                }
            },
            watch: {
                id: function (newVaL) {
                    this.changeBtnBg();
                },
                name: function (newVaL) {
                    this.changeBtnBg();
                },
                bankName: function (newVaL) {
                    this.changeBtnBg();
                },
                branch: function (newVaL) {
                    this.changeBtnBg();
                }
            }
        });
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }
</script>
</html>
